$width: 176px;
$width-half: -88px;

.loading {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 999;
	background-color: #FFF;
	.loading-container {
        position: absolute;
        left: 50%;
        top: 50%;
        width: $width;
        height: 240px;
        margin-left: $width-half;
        margin-top: -120px;
		// .loading-pic {
		// 	position: relative;
		// 	overflow: hidden;
		// 	width: 164px;
		// 	height: 164px;
		// 	background-image: url(../img/loading-1.jpg);
		// 	background-size: contain;
		// 	background-repeat: no-repeat;
		// 	.loading-pic-mask {
		// 		position: absolute;
		// 		width: 164px;
		// 		height: 164px;
		// 	}
		// }
        .loading-ani {
            width: $width;
            height: $width;
            position: relative;
            // position: absolute;
            // top: 50%;
            // left: 50%;
            // margin-top: -82px;
            // margin-left: -82px;

            .hi {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -17.5px;
                margin-left: -32px;
                width: 64px;
                height: 35px;
                background-repeat: no-repeat;
                background-size: contain;
                background-image: url(../img/icon/loading-hi.png);
                opacity: 0;
            }

            .bubble{
                width: 100%;
                height: 100%;
            }
            .bubble1, .bubble2 {
                position: absolute;
                display: inline-block;
                box-sizing: border-box;
                border: 8px solid #fc2441;
                border-radius: 100%;
            }
            .bubble1 {
                top: -52px;
                left: 20px;
                width: 36px;
                height: 36px;
            }
            .bubble2 {
                top: -10px;
                left: -2px;
                width: 28px;
                height: 28px;
            }

            .loading_mask {
                position: absolute;
                left: 2px;
                top: 2px;
                width: 172px;
                height: $width;
                border-radius: 100px;
                overflow: hidden;
                z-index: 2;
                .wave {
                    background-color: #fc2441;
                    width: 100%;
                    height: 50%;
                    position: relative;
                    z-index: 1;
                    i {
                        position: absolute;
                        //display: block;
                        bottom: -48px;
                        left: 0px;
                        width: 100%;
                        background-image: url(../img/loading-wave.png);
                        background-size: contain;
                        background-repeat: repeat-x;
                        height: 50px;
                        // transform: translateZ(0);
                        // overflow: hidden;
                        animation: ani-wave 200s 0s infinite linear;
                        backface-visibility: hidden;
                    }
                }
            }
        }
        
		.loading-percent {
			margin-top: 30px;
			text-align: center;
			color: #fc2441;
			font-size: 30px;
		}
	}
}

@keyframes ani-wave {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 12000PX 0;
    }
}
